<template>
  <el-card>
    <el-checkbox :label="imgDetail.applicationId">
      <!-- <img src=" https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="img"> -->
      <!-- <img :src="realSrc" class="img1"> -->
      <div class="img2" :style="{ backgroundImage : 'url(' + realSrc + ')' , backgroundSize:'contain' }" @click="handleDetail">
        <div class="status" :style="{ '--color':statucccc(imgDetail.status)}">{{  statussss(imgDetail.status)}}</div>
      </div>
      <div class="detail-bottom" v-show="(imgDetail.applicationId) == hoverIdentifyId">{{imgDetail.classify}} ({{imgDetail.name}}) {{imgDetail.thumbnailImg.length}}张 </div>
      <el-badge :value="imgDetail.thumbnailImg.length" class="badge_item" type='primary'>
      </el-badge>
    </el-checkbox>
    <div class="bottom" @mouseenter="hoverIdentifyId = imgDetail.applicationId" @mouseleave="hoverIdentifyId = null">
      <div class="bottom1">
        <span class="aa">
          <strong>分类：</strong> {{imgDetail.classify}}
        </span>
        <span class="aa">
          <strong>名称：</strong> {{imgDetail.name}}
        </span>

      </div>
      <div><strong>应用场景：</strong> {{imgDetail.scenarios}}</div>
      <div><strong>录入人员：</strong> {{imgDetail.createBy}}</div>
      <div><strong>上传时间：</strong> {{imgDetail.createTime}}
        <span style="float: right;cursor: pointer;" @click="handleDetail">查看详情>></span>
      </div>

      <el-row>
        <el-button size="mini" type="text" icon="el-icon-s-check" @click="handleShenhe" v-hasPermi="['application:audit']" v-if="imgDetail.status==(0||1||3)">审核</el-button>

        <el-button size="mini" disabled type="text" icon="el-icon-s-check" v-else>已审核</el-button>

        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate" v-hasPermi="['application:edit']" :disabled="imgDetail.status!=0">修改</el-button>


        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete" v-hasPermi="['application:remove']">删除</el-button>


        <el-button size="mini" type="text" icon="el-icon-download" @click="handleDownSPD" v-hasPermi="['application:export']" v-if="shenpidan">下载审批单</el-button>
      </el-row>



    </div>
  </el-card>


</template>

<script>
import { isExternal } from "@/utils/validate";
export default {
  props: {
    imgDetail: {
      typeof: Object,
      default: {},
    },
    shenpidan: {
      typeof: Boolean,
      default: false,
    },
  },
  data() {
    return {
      hoverIdentifyId: null,
    };
  },

  components: {},

  computed: {
    realSrc() {
      let real_src = this.imgDetail.thumbnailImg[0];

      if (isExternal(real_src)) {
        return real_src;
      }
      return real_src;
    },
  },

  mounted() {},

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    handleShenhe() {
      this.$emit("shenhe", this.imgDetail, "shenhe");
    },
    handleChexiaoShenhe() {
      this.$emit("chexiaoShenhe", this.imgDetail, "shenhe");
    },
    handleUpdate() {
      this.$emit("xiugai", this.imgDetail, "xiugai");
    },
    handleDelete() {
      this.$emit("shanchu", this.imgDetail);
    },
    handleDownSPD() {
      this.$emit("downSpd", this.imgDetail);
    },
    handleDetail() {
      this.$emit("xiangqing", this.imgDetail);
    },
    statussss(status) {
      console.log("status: ", status);
      let a;
      switch (status) {
        case 0:
          a = "待审核";
          break;
        case 1:
          a = "本单位审核通过";
          break;
        case 2:
          a = "本单位审核退回";
          break;
        case 3:
          a = "省单位审核通过";
          break;
        case 4:
          a = "省单位审核退回";
          break;
        default:
          a = "";
          break;
      }
      return a;
    },
    statucccc(status) {
      let a;
      switch (status) {
        case 0:
          a = "rgba(0, 164, 211, 0.996)";
          break;
        case 1:
          a = "rgba(76, 122, 52, 0.996)";
          break;
        case 2:
          a = "rgba(0, 164, 211, 0.996)";
          break;
        case 3:
          a = "rgba(76, 122, 52, 0.996)";
          break;
        case 4:
          a = "rgba(183, 15, 10, 0.996)";
          break;
        default:
          a = "";
          break;
      }
      return a;
    },
  },
};
</script>

<style scoped lang='scss'>
.el-card {
  width: 350px;
  height: 280px;
  ::v-deep .el-card__body {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    .el-checkbox {
      // height: 100%;
      // width: 100%;
      flex: 1;
      display: flex;
      .el-checkbox__input {
        position: absolute;
      }
      .el-checkbox__label {
        padding: 0;
        position: relative;
        // height: 100%;
        // width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
      }
    }
    .bottom {
      font-size: 12px;
      margin: 4px 0 0 0;
      .bottom1 {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .aa {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
.img1 {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  text-align: center;
}
.img2 {
  position: relative;
  // flex: 1;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  text-align: center;
  background-position: center;
  border: 1px dashed #ccc;
  overflow: hidden;
}
.badge_item {
  position: absolute;
  right: 0;
  top: 0;
  ::v-deep sup {
    top: 0;
  }
}
.detail-bottom {
  position: absolute;
  height: 40px;
  width: 100%;
  line-height: 40px;
  background: rgba(68, 68, 68, 0.996);
  opacity: 0.8;
  bottom: 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
.status {
  position: absolute;
  width: 100%;
  line-height: 30px;
  height: 30px;
  transform: rotate(-45deg) translate(-33%, -172%);
  text-align: center;
  top: 0;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  background-color: var(--color);
  opacity: 0.8;
}
</style>